<template>
    <div id="container"></div>
  </template>
  
  <script>
      import AMapLoader from '@amap/amap-jsapi-loader';
      window._AMapSecurityConfig = {
          securityJsCode:'07cd844a768b7fc72cba70deb255d2e2'
      }
      export default {
          name:'MapContainer',
          data() {
              return {
                map:null,
                autoOptions:{
                    input: "tipinput"
                },
                auto:null,
                placeSearch:null,
              }
          },
          methods:{
              initMap() {
                  AMapLoader.load({
                      key: '89e2c5f15bf626209a5fa5ec4d7e15aa', // 申请好的Web端开发者Key，首次调用 load 时必填
                      version: '2.0',                           // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                      plugins: ['AMap.PlaceSearch','AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                  }).then(AMap => {
                        this.map = new AMap.Map('container', {
                            resizeEnable: true,
                            //设置地图容器id
                            viewMode: '3D', //是否为3D地图模式
                            zoom: 15, //初始化地图级别
                            center:[114.316833,30.422298] //初始化地图中心点位置
                        });

                        this.auto = new AMap.AutoComplete(this.autoOptions);
                        this.placeSearch = new AMap.PlaceSearch({
                            map: this.map
                        });  //构造地点查询类

                        this.auto.on('select', this.select)  

                    }).catch(e => {
                        console.log(e)
                  })
              },
              select(e) {
                    this.placeSearch.setCity(e.poi.adcode);
                    this.placeSearch.search(e.poi.name);  //关键字查询查询
              },
          },
          mounted(){
              this.initMap();
          },
          created() {
              this.$bus.$on('share_id', val => {
                  this.autoOptions.input = val;
              })
          },
          beforeDestroy(){
              this.$bus.$off('share_id');
          }
      }
  </script>
  
  <style lang="less" scoped>
  #container{
      width: 94.5%;
      margin-top: 8px;
      height: 300px;
      padding: 2px;
      background-color: #409EFF;
  }
  </style>